<template>
  <div class="battery">
    <div class="tooltips">
      <span>{{ $t("提示由于诊断分析数据过多系统自动清理7天之前的数据") }}</span>
    </div>
    <div class="chartBox">
      <div class="chartShadow quantity" ref="quantityChart">
        <div class="header">
          <div class="title">{{ $t("电量") }}</div>
          <div class="selectGroup">
            <el-date-picker
              v-model="quantityTime"
              type="datetimerange"
              size="medium"
              :start-placeholder="$t('开始时间')"
              :end-placeholder="$t('结束时间')"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="ChangeTime($event, 'mainChart', 'lineChartAll0')"
            >
            </el-date-picker>
            <img
              class="chat"
              src="../../../assets/images/topRight.png"
              alt=""
            />
            <img
              @click="fullScreen('quantity')"
              class="chat"
              src="../../../assets/images/screen.png"
              alt=""
            />
          </div>
        </div>
        <lineChart
          ref="mainChart"
          :times="times"
          :lineChartAll="lineChartAll0"
        ></lineChart>
      </div>
      <div class="chartShadow voltage" ref="voltageChart">
        <div class="header">
          <div class="title">{{ $t("电压") }}</div>
          <div class="selectGroup">
            <el-date-picker
              v-model="voltageTime"
              type="datetimerange"
              size="medium"
              :start-placeholder="$t('开始时间')"
              :end-placeholder="$t('结束时间')"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="ChangeTime($event, 'gpuAll', 'lineChartAll1')"
            >
            </el-date-picker>
            <img
              class="chat"
              src="../../../assets/images/topRight.png"
              alt=""
            />
            <img
              @click="fullScreen('voltage')"
              class="chat"
              src="../../../assets/images/screen.png"
              alt=""
            />
          </div>
        </div>
        <lineChart
          :lineChartAll="lineChartAll1"
          ref="gpuAll"
          :times="times"
        ></lineChart>
      </div>
      <div class="chartShadow temp" ref="tempChart">
        <div class="header">
          <div class="title">{{ $t("温度") }}</div>
          <div class="selectGroup">
            <el-date-picker
              v-model="tempTime"
              type="datetimerange"
              size="medium"
              :start-placeholder="$t('开始时间')"
              :end-placeholder="$t('结束时间')"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="ChangeTime($event, 'memory', 'lineChartAll2')"
            >
            </el-date-picker>
            <img
              class="chat"
              src="../../../assets/images/topRight.png"
              alt=""
            />
            <img
              @click="fullScreen('temp')"
              class="chat"
              src="../../../assets/images/screen.png"
              alt=""
            />
          </div>
        </div>
        <lineChart
          :lineChartAll="lineChartAll2"
          ref="memory"
          :times="times"
        ></lineChart>
      </div>
    </div>
  </div>
</template>
<script>
import moment from "moment";
import lineChart from "./components/lineChart.vue";
import screenfull from "screenfull";
import { API_getBatteryValue } from "@/api/log/battery";
export default {
  name: "battery",
  props: {},
  data() {
    return {
      // 电量
      lineChartAll0: [
        {
          type: "line",
          textStyle: {
            color: "#73F6AF",
          },
        },
        {
          type: "line",
          textStyle: {
            color: "#00D1FF",
          },
        },
      ],
      // 电压
      lineChartAll1: [
        {
          type: "line",
          textStyle: {
            color: "#73F6AF",
          },
        },
        {
          type: "line",
          textStyle: {
            color: "#00D1FF",
          },
        },
      ],
      // 温度
      lineChartAll2: [
        {
          type: "line",
          textStyle: {
            color: "#73F6AF",
          },
        },
        {
          type: "line",
          textStyle: {
            color: "#00D1FF",
          },
        },
      ],
      times: [], // 折线图下边的时间
      quantityTime: [],
      voltageTime: [],
      tempTime: [],
    };
  },
  components: {
    lineChart,
  },
  created() {
    this.times[0] = moment().subtract(1, "day").format("YYYY-MM-DD HH:mm:ss");
    this.times[1] = moment().format("YYYY-MM-DD HH:mm:ss");
    this.quantityTime = [this.times[0], this.times[1]];
    this.voltageTime = [this.times[0], this.times[1]];
    this.tempTime = [this.times[0], this.times[1]];
    this.objBattery({ startTime: this.times[0], endTime: this.times[1] });
  },

  methods: {
    // 折线图搜索
    ChangeTime(val, type, e) {
      console.log(val);
      if (val) {
        this.objBattery({ startTime: val[0], endTime: val[1] }, type, e);
      } else {
        this.objBattery(
          {
            startTime: moment()
              .subtract(1, "day")
              .format("YYYY-MM-DD HH:mm:ss"),
            endTime: moment().format("YYYY-MM-DD HH:mm:ss"),
          },
          type,
          e
        );
      }
    },
    // 获取电池数据
    objBattery(time, type, e) {
      API_getBatteryValue(time).then((res) => {
        console.log(res);
        if (res.data) {
          this.lineChartAll0[1].data = res.data.quantity
            .split(",")
            .map((item) => {
              return Number(item);
            });
          this.lineChartAll1[1].data = res.data.voltage
            .split(",")
            .map((item) => {
              return Number(item);
            });
          this.lineChartAll2[1].data = res.data.temp.split(",").map((item) => {
            return Number(item);
          });
          this.times = res.data.createTime.split(",").map((item) => {
            return item;
          });
          this.$refs[type].initChart(this[e]);
        }
      });
    },
    // 点击全屏
    fullScreen(type) {
      if (!screenfull.isEnabled) {
        this.$message({
          message: this.$t("你的浏览器不支持全屏"),
          type: "warning",
        });
        return false;
      }
      switch (type) {
        case "quantity":
          screenfull.toggle(this.$refs.quantityChart);
          break;
        case "voltage":
          screenfull.toggle(this.$refs.voltageChart);
          break;
        case "temp":
          screenfull.toggle(this.$refs.tempChart);
          break;
      }
    },
    //获取当前时间
    // getNowTime() {
    //   let start = new Date(new Date(new Date().toLocaleDateString()).getTime());
    //   var year = start.getFullYear(); //年
    //   var month = ("0" + (start.getMonth() + 1)).slice(-2); //月
    //   var day = ("0" + start.getDate()).slice(-2); //日
    //   start = year + "-" + month + "-" + day;
    //   let end = new Date(
    //     new Date(new Date().toLocaleDateString()).getTime() +
    //       24 * 60 * 60 * 1000 -
    //       1
    //   );
    //   var year = end.getFullYear(); //年
    //   var month = ("0" + (end.getMonth() + 1)).slice(-2); //月
    //   var day = ("0" + end.getDate()).slice(-2); //日
    //   end = year + "-" + month + "-" + day;
    //   return [start + " 00:00:00", end + " 23:59:59"];
    // },
  },
};
</script>

<style scoped lang="scss">
.battery {
  padding: 0 24px;
}
.chartShadow {
  width: 100%;
  height: 382px;
  margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.06);
}
.chartShad {
  width: 49.6%;
  height: 382px;
  margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.06);
}
.quantity,
.voltage,
.temp {
  position: relative;
  .header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 24px 16px;
    display: flex;
    justify-content: space-between;
    z-index: 999;
    .title {
      font-size: 16px;
      font-weight: bold;
      color: #00d1ff;
      display: flex;
      align-items: center;
    }
    .selectGroup {
      .chat {
        display: inline-block;
        width: 20px;
        height: 20px;
        vertical-align: middle;
        margin-left: 16px;
      }
    }
  }
}
::v-deep {
  input {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    border: none !important;
  }
}
</style>
